<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="info">
    <input type="text" v-model="num">
    <input type="button" value="加" v-on:click="f(1)">
    <input type="button" value="减" @click="f(2)">
    <input type="button" value="乘" @click="f(3)">
    <input type="button" value="除" @click="f(4)">
    <h1>结果:{{result}}</h1>
</div>
<script src="js/vue.min.js"></script>
<script>
    let v =new Vue({
        el:"body>div",
        data:{
            info:"",num:"",result:""
        },
        methods:{
            f(x){
                if (isNaN(v.info)||isNaN(v.num)){
                    v.result="输出错误";
                    return;
                }
                switch (x){
                    case 1:
                        v.result=parseInt(v.info)+parseInt(v.num);
                       // v.result =eval(v.info+x+v.num);
                        break;
                        case 2:
                            v.result=v.info-v.num;
                            break;
                            case 3:
                                v.result=v.info*v.num;
                                break;
                                case 4:
                                    v.result=v.info/v.num;
                                    break;
                }
            }


        }
    })
</script>
</body>
</html>